<template>
	<DialogBox v-if="drawerVisible" v-model:visible="drawerVisible" :title="`${drawerProps.title}分组`" width="550px">
		<el-form
			class="pr-8"
			ref="ruleFormRef"
			label-width="100px"
			label-suffix=" :"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
			:hide-required-asterisk="drawerProps.isView"
		>
			<el-form-item label="分组名称" prop="deptName">
				<el-input v-model="drawerProps.rowData!.deptName" />
			</el-form-item>
			<el-form-item label="父级分组" prop="parentId">
				<el-tree-select
					v-model="drawerProps.rowData!.parentId"
					:data="parentDeptTree"
					check-strictly
					placeholder="选择上级分组"
					clearable
					class="w-full"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="drawerVisible = false">取消</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
		</template>
	</DialogBox>
</template>

<script setup lang="ts" name="UserDrawer">
import DialogBox from "@/components/DialogBox";
import { FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { DeptModel } from "../interface";
// import { GlobalStore } from "@/stores";
import { getDeptList } from "@/api/modules/dept";
import { getTreeList } from "@/utils/treeUtil";
import { showMsg, showTips } from "@/utils/util";
import { MessageType } from "@/enums/messageEnum";

const rules = reactive({
	deptName: [{ required: true, message: "名称不能为空" }]
});
interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: DeptModel;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps): Promise<void> => {
	drawerProps.value = params;
	await getAllDept();
	drawerVisible.value = true;
};
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	if (drawerProps.value.rowData?.id && drawerProps.value.rowData?.parentId == drawerProps.value.rowData?.id) {
		showMsg("父级分组不能选择为当前分组", MessageType.warning);
		return;
	}
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			let { code } = await drawerProps.value.api!(drawerProps.value.rowData);
			let ok = showTips(code, drawerProps.value.rowData?.id ? "修改分组" : "添加分组");
			// ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
			if (ok) {
				drawerProps.value.getTableList!();
				drawerVisible.value = false;
			}
		} catch (error) {
			console.log(error);
		}
	});
};

//获取角色分组权限
const parentDeptTree = ref<any>({});
const getAllDept = async () => {
	if (drawerProps.value.rowData) {
		// const { userInfo } = GlobalStore();
		let { result } = await getDeptList();
		parentDeptTree.value = getTreeList(result.records.children, "id", "deptName");
		drawerProps.value.rowData.parentId =
			drawerProps.value.rowData?.parentId || (result.records.children.length > 0 && result.records.children[0].id) || "";
		drawerProps.value.rowData.parentId = drawerProps.value.rowData.id == "root" ? "" : drawerProps.value.rowData.parentId;
	}
};

defineExpose({
	acceptParams
});
</script>
